<template>
  <div class="d-flex">
    <svg
      style="min-width: max-content;"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="61px"
      height="61px"
    >
      <image
        x="0px"
        y="0px"
        width="61px"
        height="61px"
        xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAQAAAC0a6liAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflARwNIS1sajvDAAADjklEQVRYw8WZ3W8UVRjGf3va7oe2a22bflBMSEHbhipqJDXBFNGmRkpIw0oaFgveeWPihTea9D/wxgsSuTF+JH7EaGIkAQMlJqYaP0JiFBSW6gWEppUuFZYSitDHi93Zsu2wO7vdOXOei53dPfP+znPmzMyb94REWS3CTp5lE+00ESPGEotc5wozpJhggtveQ4U8oxt4gi6GWM85zpDiAmluEqaeRjrppo9naOU0xzjEFU8R5UUblNCw2oRqivZrU1InlNGEtpeOWhrbpb3ql/E0xKxa9Zbm9JMG14KOa4+2KlQG1lFMr2tO36itMvTjGlG0AqyjRh3WnMbKRddqt55cA9bRc7qs991XiPsJUSXVUgUwQuv0s35R3Bs6rv1qqBIYobC+1lk1l0bXa0yRKoIRqtGHOqP64ug6HayqY0chfaHJwlt0ZZeEHvQBnJ327/XJvdHb1OcTGKEWXdYr7ugm7fIRjNDzmlOHG3qP6nxGo8M6uhrd5+tkO2pUWkOF6JBGLYARelW/FqIfVa8ldJ1msr5N7rXdw5/lpSsVt/94mzeXU4UWDVjyjFCDrqvdcf0Upyx5BshwktfIoSMsWETDBwxn0Q3MWwXDcR7hfgP0cN4yeoEUIwboYMYyGiYZMGQXue12ik0GCFkHwxTtBlgKAD1Ns8EEgk4TNsRYDACd4XNDnBcCQC9x1HCLsQDQEDKkacu/v2y2Owb4l85gXMMsDweANga4GAA6wk0D/MZ26+iHuGCAIwGgN/CXAb4jxkbL6Pu4lX1zTbLPKvgBFsilhS/pvMW0EA0q7qSFXxJjm0XXca45aaH4mHFr4M25nD+fG8/rMUvTnch+Ok/vDB/xrhXPWziXO8qPJaJLznh8VFj7neO7fx7VP2r1GT28XBQrrAx/SgtDPuanPTTxQ/7biulIadw3x/HCC7ry7y5NL1+NqiqmUYWLodHTuqqRqoNr9fLKepxbt126qgNVBUe0b3XN1b3rDqU1XlEd3E31SnotzyLUqymdWF1SrUBdGnWvqhdbFl9pdo0PGaNBDdxr9oqfmtS0jqu7Yr97l2uD5aJRVIeU1mfaUiZ2vRKldk28hInrHc3qD71RzENedepXQltL7xF53WKrIckY/czwLT9ylpTLNloz3bRzh9/520tI77t72QG8yE566aSDKNc4wntEiFJDLbeZZ4pp78HKQ9/dojRRS4ZFblQW4H9qmQGoIJI75gAAAABJRU5ErkJggg=="
      />
      <image
        x="6px"
        y="5px"
        width="50px"
        height="48px"
        xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAvCAQAAAALflF/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflARwNIS71Y2p5AAACfklEQVRYw7WXTUhUURTH/2+0RmcMCzGcaoJAIsGohUQQlOsKqo2LIGbTokVERCSEi6CghQTSwmgTUS1Mij6IiDaRFAWhZBAUWYuIDEQHK8KmnF+Ld1/z0Yzz8t17DrwH7557f5zz7rvvfzwUyWLKhwmKZp26oIyaakRR3ZOopu9nFvhKP23Vo6oNLOc8Q7TWQKzmPoH94BSN/wPZxWfgO33Ea2BW0cvrv6B3bA0HqecceTPpNi0hSuaxlzEzI8dxvFqQJA9M+Cd6QgACj3GIGTPzMvULQRI8MYH3QuVQ6mt5ZmbfoK4aZCl3TdDpf1MO5Uu4YlYYLF6hOGTQBBxbFCB4PwNmld5KkB4zeDYCwsdcA+AX28ohbWQBGF5koUrL/hSA9yRKIVcBmKA5MsLfAtMAnCmGdJEH8nRbQQiRAWCONQXILVMqWwjh8RyAgQCyweTRaREidpoTbYUP6QfgjlWEEC8BOOxDPgKwxzrkCAAjyCOlk0qrQxuVi/gDK7eVmlRMv9Ui4jSTost6HkKMArA7pp+a1aRGLWfh2yNJ0pbgHx9RT1SxMUnS+qhCYmGbkCS1u4VMSZJSbiHfJElJt5B5/+YWskySNOcW0ipJmnILaZckfXAL6ZAkvXEL2SFJGvfcfOqSpIRmFJfj72Sf4pJe6YtLSEaSNKQScVdn9ZjfTB6YJx0ICa/oastvAnA9EBIufLsRJ5vcQZK8LeThCuLr0Vlf2rmBnDDS/UDwpHKyURAZ0wxeKjyrFNZUrYsN4UcN4nGg6CtDFr+RG7hoCjVe2h3YexNp05XAi/J+096xktWIcpKG1a3psjGLu2odDzlYacTmUd+gRmUrDfwBkgI9KywzUAAAAAAASUVORK5CYII="
      />
      <image
        x="11px"
        y="10px"
        width="39px"
        height="42px"
        xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAqCAMAAAAH47LZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACkVBMVEX//wBy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cd13SZy3Cdy3Cdy3Cdy3CeJ4iGQ4x+V5R2V5R2P4x+w6xb+/wD//wD//wD//wBy3Cdy3Cdy3CeL4iCj6Bmw6xa47RT//wD//wD//wD//wD//wD//wBy3Cdy3CeY5R2u6xb//wD//wD//wD//wBy3Cd43SVz3CeJ4iGv6xb//wD//wD//wD//wD//wDq+gaw6xal6Rn//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD//wD+/wD4/QJy3Cf//wDF8RC87hNy3Cdy3Cf//wD//wCs6hdz3Cdy3Cf//wD//wCz7BVy3Cev6xZ23SZy3Cf//wD//wDE8BCi6Bpy3Cdy3Cf//wD//wCq6hiI4SFy3Cdy3Cf//wD//wC47RSs6heO4x9y3Cdy3Cf//wD//wD//wD//wD//wC47RSx7Bap6hiY5R193yRy3Cdy3Cdy3Cf//wD//wD//wD9/wBy3Cdy3CeN4yBy3Cdy3Cdy3Cdy3Cdy3Cdy3Cdy3Cd33SZ03SZz3Cd13SbC8BH////8F44dAAAA1HRSTlMAAA82RFVQPSEMWaDh2jUglPP27ePo8PXusWkSDoz68a5QAhdXpPGlKz/g2kkOd+mYGrH+81cQleM9KOO5C0voYC0l3m0b4lskA8N9MOonebkByQIf6yFnl4Y1BhXvX2xSv8FKFArzC7JWN8x6jV12ijnHg3zSfoEu0XKOPsJTsKnZiIDuGcVCq2IJB+bYQXStRA3jPwQRu79UA5G0oPMwvZuAa5L+jqzKDMyRAXF1efj7crNwCoXv3Doz8LdAGh5cm9z98HsJk+f++NNxILvy0apvLK72IcgAAAABYktHRNruAyaCAAAAB3RJTUUH5QEcDSEtbGo7wwAAAftJREFUOMtjYAADRjhgYmZhZWPnYEQFDAzI6ji5uHmugAEvH251/AKCQBVXhYRFRMXEJSSlpLGqk5GVu3JFXkFRCSKhrKKqpq6BqU5T68o1bR0Uu3T19A2k0dQZGhmbmDKiAzNzC0tUdVbWNraMWICdvQOyOkcoFxM4Obsg1Lm6uTPiAh5uKjB1nl7ejLiBj68fVJ1/QCAedYxSQcFgdSGhYQz41AV6hYPVRUQy4FXHGGURDVQWExtDQB1jQBxQXbwqAyF1CYlAJUnJBNVFx6YwpKalE1THmJHJkJXNQFhdTi5DnioR6hIyGPILiFBXWMRQXEKEOsdShrJyItRVVDJUVROhrqaWoa6eCHV5DQwajUSoa2pmCG5pJayurZ2BoaOToLoUtS4GBnAk41cHTirdPRUE1AX39oH80D+BgDr3NnB6TnWeiFfdpMlTpoLzUbLzNHzqps+YOQuSf2fP8cStbO71efOh+Tx6wcJAXMoW3biyGF5upNeqR2NXtmTplWWMiHKoa/mKMCyqVq66fmX1GiR1jIFrQ9dhGLl+w5WNm8AspHLXY7PbFuSiduu27Veu7NjJiK6OkXGX6u49/Xv3BTMy7j9w8NDhK1eOHD3GiEUdsKhNOO514uSpm9dBZf7pM0xww9HUQcDZc+cvXLx0GVkIq7pZmB5nAAAosIck1wyEfwAAAABJRU5ErkJggg=="
      />
      <image
        v-if="iconData"
        x="20px"
        y="20px"
        width="20px"
        height="20px"
        :xlink:href="iconData"
      />
    </svg>
    <v-img
      class="d-flex align-center pl-5"
      max-width="322"
      src="./img/不规则长方形.png"
    >
      <div class="d-flex pl-2 pr-6 justify-space-between white--text fs-20">
        <div v-if="title">
          {{ title }}
        </div>
        <div v-if="count">
          {{ count }}
        </div>
      </div>
    </v-img>
  </div>
</template>
<script>
export default {
  doc: {
    name: 'T标题组件',
    desc: '用于页面中每块区域中的小标题; icon: stretch、screenshot、page_max、close_all 所有选项到组件 /img/icon 查看'
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    icon: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: undefined
    }
  },
  data: () => ({
    iconData: ''
  }),
  watch: {
    icon: function () {
      this.initIcon()
    }
  },
  created () {
    this.initIcon()
  },
  methods: {
    initIcon () {
      if (this.icon) {
        try {
          this.iconData = require('./img/icon/' + this.icon + '.png')
        } catch (error) {
          this.iconData = ''
        }
      }
    }
  }
}
</script>
